<template>
    <div id="newsInfo">
      <ul>
        <li>
          <span class="left">{{date}}</span>
          <span class="left">&nbsp;by {{news.author}}</span>
          <span class="right" @click="getLike" :style="isLike?'':'color:#000 !important'">&nbsp;<img class="newsInfo_img" :src="likeIcon"/> &nbsp;{{news.likes}}</span>
          <span class="right"><van-icon name="eye"/> {{news.views}}</span>
        </li>
      </ul>
    </div>
</template>

<script>
  import {Toast} from 'vant'
    export default {
        name: "newsInfo",
      data(){
          return{
            isLike:true,
            likeIcon:require('@/assets/mobile/newsImg/likeIcon.png'),
          }
      },
      computed:{
          date:{
            get(){
              let time=this.news.created_time;
              this.isLike=true;
              this.likeIcon=require('@/assets/mobile/newsImg/likeIcon.png');
              return this.timestampToTime(time);
            },
            set(){}
          }
      },
      methods:{
        getLike(){
          if(this.isLike) {
            this.isLike=false;
            let _this = this;
            this.likeIcon=require('@/assets/mobile/newsImg/likeIcon_active.png');
            this.axios.get(domain.url + 'news/api/like_news', {
              params: {
                id: _this.news.id
              }
            })
              .then(function (response) {
                let data = response.data;
                _this.news.likes+=1
                Toast(_this.$t('theNews.like'));
                //console.log(response.data);
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        },
        timestampToTime(timestamp) {
          let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          let D = this.change(date.getDate()) + ' ';
          return Y + M + D ;
        },
        change(t) {
          if (t < 10) {
            return "0" + t;
          } else {
            return t;
          }
        }
      },
      props:{
          news:{},
      }
    }
</script>

<style scoped>
  #newsInfo{
    background: #f5f5f5;
    border-radius: 3px;
    overflow: hidden;
    padding:5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-size:12px;
    color:#999999;
  }
  #newsInfo ul li{
    height:20px;
  }
  #newsInfo ul li span{
    height:20px;
    display: inline-block;
    line-height: 20px;
    margin-right: 5px;
  }
  #newsInfo ul li span .van-icon{
    float:left;
    font-size:20px;
    margin-right: 5px;
  }
  #newsInfo .left{
    float:left;
    display: inline-block;
  }
  #newsInfo .right{
    float:right;
    display: inline-block;
    vertical-align:middle;
  }
  .newsInfo_img{
    width:15px;
    vertical-align: middle;
    margin-top: -2px;
  }
</style>
